<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/jquery.js"></script>
    <link href="../style/default.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../style/style.css">
    <script src="../js/highlight.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();
    </script>
    <script src="../js/initTemp.js"></script>
</head>

<body>
    <div class="qcanvas_lay">
        实质上是一个**抽象**的元素容器类 为了容纳其它元素。（宽高和主画布一样）<br>
        1、当我们不使用Qlayer时 元素直接画在主画布上； <br>
        2、当使用Qlayer时 先创建一个临时的canvas画布 把指定要放到该容器内的元素先画这个临时canvas上，最后在requestNextAnimationFrame的下一个循环时再把这个画布画到主画布上 当然临时canvas也在requestNextAnimationFrame控制下不停的重绘 所以现在框架实现的这些元素都可以指定到一个Qlayer对象上<br>
        3、使用Qlayer元素的好处：可以一次性控制一批元素的显示、隐藏、删除、层级关系等 <br>
        4、删除Qlayer元素 会同时删除它所容纳的所有元素 <br>
        5、注： 添加到同一个layer实例中的多元素 它们之间的层级关系是以该layer实例为基准的 所以Qcanvas的以下方法 对Qlayer元素容器内的元素无效 如果需要调整层级关系 需要调用Qlayer的相应方法<br>
        |lower|把元素降低一个层级 (参数为元素对象) <br>
        |lowerToBottom|把元素层级置底(参数为元素对象)<br>
        |raise|把元素提高一个层级(参数为元素对象) <br>
        |raiseToTop|把元素层级置顶(参数为元素对象)<br>
        blueRect、redRect元素、spirit元素及【我是来自layer容器里spirit】是layer元素容器里的元素<br>
        <canvas id="qcanvas"></canvas>
    </div>
    <div class="code_lay">
        <pre><code class="js"> var qcanvas = new Qcanvas({
    	id: 'qcanvas',
	    width: 300,
	    height: 200,
    });

    var greenRect = qcanvas.rect({
        start: [0, 0],
        width: 200,
        height: 200,
        drag: false,
        borderColor: 'green',
        fillColor: 'green',
        mousemove: function() {
            // console.log(qcanvas.dragAim);

            // if(qcanvas.dragAim !== null && qcanvas.dragAim.id == this.id){
            // 	console.log()
            // }
        },
    })

    var redRect = qcanvas.rect({
        start: [100, 100],
        width: 50,
        height: 50,
        borderColor: 'red',
        fillColor: 'red',
        // degree:30
        // drag:false
    })







    var blueRect = qcanvas.rect({
        start: [120, 140],
        width: 50,
        height: 50,
        borderColor: 'blue',
        fillColor: 'blue',
        degree: 30
        // drag:false
    })









    //layer元素
    var layer = qcanvas.layer();

    layer.push(redRect, blueRect);

    // layer.push(blueRect);


    layer.raise(redRect);




    qcanvas.load({
        "person": "../img/spirit1.png",
    }, function() {

        var spiritSource = qcanvas.getSourceByName("person");

        var s = qcanvas.spirit({
            img: spiritSource,
            row: 1,
            column: 8,
            framesIndex: [0, 0],
            tStart: [0, 120],
            tWidth: 40,
            tHeight: 64,
            isLoop: true,
            during: 1,
            mouseup: function() {
                console.log(this);
                console.log('触发mouseup事件');
            }
        })

        var t = qcanvas.text({
            start: s.tStart,
            text: '我是来自layer容器里spirit',
            color: '#000',
            pointerEvent: 'none'
        })



        layer.push(t);
        layer.push(s);

    })




    qcanvas.text({
        start: [200, 20],
        text: 'greenRect上移一层',
        color: "yellow",
        drag: false,
        mouseup: function() {
            qcanvas.raise(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 40],
        text: 'greenRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 60],
        text: 'redRect上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            layer.raise(redRect);
        }
    })
    qcanvas.text({
        start: [200, 80],
        text: 'redRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            layer.lower(redRect);
        }
    })

    qcanvas.text({
        start: [200, 100],
        text: 'layer下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(layer);
        }
    })

    qcanvas.text({
        start: [200, 120],
        text: 'layer上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.raise(layer);
        }
    })
		</code>
	</pre>
    </div>
    <script src='Qcanvas-v2.0.js'></script>
    <script>
    var qcanvas = new Qcanvas({
        id: 'qcanvas',
        width: 300,
        height: 200,
    });

    var greenRect = qcanvas.rect({
        start: [0, 0],
        width: 200,
        height: 200,
        drag: false,
        borderColor: 'green',
        fillColor: 'green',
        mousemove: function() {
            // console.log(qcanvas.dragAim);

            // if(qcanvas.dragAim !== null && qcanvas.dragAim.id == this.id){
            // 	console.log()
            // }
        },
    })

    var redRect = qcanvas.rect({
        start: [100, 100],
        width: 50,
        height: 50,
        borderColor: 'red',
        fillColor: 'red',
        // degree:30
        // drag:false
    })







    var blueRect = qcanvas.rect({
        start: [120, 140],
        width: 50,
        height: 50,
        borderColor: 'blue',
        fillColor: 'blue',
        degree: 30
        // drag:false
    })









    //layer元素
    var layer = qcanvas.layer();

    layer.push(redRect, blueRect);

    // layer.push(blueRect);


    layer.raise(redRect);




    qcanvas.load({
        "person": "../img/spirit1.png",
    }, function() {

        var spiritSource = qcanvas.getSourceByName("person");

        var s = qcanvas.spirit({
            img: spiritSource,
            row: 1,
            column: 8,
            framesIndex: [0, 0],
            tStart: [0, 120],
            tWidth: 40,
            tHeight: 64,
            isLoop: true,
            during: 1,
            mouseup: function() {
                console.log(this);
                console.log('触发mouseup事件');
            }
        })

        var t = qcanvas.text({
            start: s.tStart,
            text: '我是来自layer容器里spirit',
            color: '#000',
            pointerEvent: 'none'
        })



        layer.push(t);
        layer.push(s);

    })




    qcanvas.text({
        start: [200, 20],
        text: 'greenRect上移一层',
        color: "yellow",
        drag: false,
        mouseup: function() {
            qcanvas.raise(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 40],
        text: 'greenRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(greenRect);
        }
    })

    qcanvas.text({
        start: [200, 60],
        text: 'redRect上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            layer.raise(redRect);
        }
    })
    qcanvas.text({
        start: [200, 80],
        text: 'redRect下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            layer.lower(redRect);
        }
    })

    qcanvas.text({
        start: [200, 100],
        text: 'layer下移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.lower(layer);
        }
    })

    qcanvas.text({
        start: [200, 120],
        text: 'layer上移一层',
        color: "yellow",

        drag: false,
        mouseup: function() {
            qcanvas.raise(layer);
        }
    })
    </script>
</body>

</html>